<template>
  <div class="left-or-right-button" @click="enterNewPage">
    <div class="left" v-show="props.obj.direction">
      <span>上一页</span>
      <div class="text">
        «
        {{ props.obj.text }}
      </div>
    </div>
    <div class="right" v-show="!props.obj.direction">
      <span>下一页</span>
      <div class="text">
        {{ props.obj.text }}
        »
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const emit = defineEmits(['left', 'right'])

// 左true右false
const props = defineProps({
  // direction代表方向，text表示文本内容，path表示跳转路由
  obj: {
    direction: Boolean,
    text: String,
    path: String,
  },
})

const router = useRouter()

// 跳转科普
const enterNewPage = () => {
  router.push(props.obj.path)
}
</script>

<style scoped less="scss">
.left-or-right-button {
  width: 350px;
  height: 70px;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid rgb(218, 221, 225);
  transition: all 0.5s;

  .left,
  .right {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    color: gray;
    font-size: 12px;
    padding: 10px 30px 0 30px;
    cursor: pointer;

    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      color: rgb(46, 133, 85);
    }
  }
}

.left-or-right-button:hover {
  border: 1px solid rgb(46, 133, 85);
}
</style>
